<template>
  <div class="template-wrap">
    <menu-top></menu-top>
    <div class="content">
      <div class="content-wrap">
        <div>
          <menu-left ref="left" :href="href"></menu-left>
        </div>
        <el-col class="main-content">
          <div class="breadcrumb-wrapper">
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item :to="{ path: '/financialInfo_v2/financialBalanceEdit' }">我的公司</el-breadcrumb-item>
              <el-breadcrumb-item>财务信息</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
          <rotate-message></rotate-message>
          <main>       
            <div class="finance-filter"> 
              <div class="filter-item">
                <div class="search-title"></div>
                  <el-select v-model="companySelect" filterable>
                      <el-option
                       label="主体公司"
                       :value="0"></el-option>
                      <el-option
                      v-for="item in companyArr"
                      :key="item.id"
                      :label="item.associatedCompanyName"
                      :value="item.id">
                      </el-option>
                  </el-select>
              </div>
              <el-button type="primary" size="small" @click="handleClickSearch">查询</el-button>
              <el-button type="primary" size="small" @click="dialogFormVisible = true">添加关联公司</el-button>
            </div>
            <div class="btn-group" v-if="active != 0 && !id">
              <div class="btn" @click="handleAdd(active)">新增</div>
            </div>
            <div class="tab">
              <div :class="{'tab-item': true, active: active == index}" v-for="(item, index) in tabConfig" :key="index">
                <router-link :to="'/financialInfo_v2/' + item.name + '?id=' + id+'&userId='+companySelect">{{item.text}}</router-link>
              </div>
            </div>
          </main>
          <div class="view">
            <router-view></router-view>
          </div>
        </el-col>
        <el-dialog center title="添加关联公司" :visible.sync="dialogFormVisible">
            <el-form :model="information" :rules="rules" ref="information">
                <el-form-item class="company-check"  label="公司名称:" :label-width="formLabelWidth" prop="associatedCompanyName">
                    <el-input
                        v-model="information.associatedCompanyName">
                    </el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button :loading="btnState"  type="primary"  @click="confrimBtn('information')">{{btnState?'提交中':'提交'}}</el-button>
            </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
let CONSTANT = require('../../../constant/constant.js'),
    common = require('../../../common.js');
export default {
  data() {
    return {
      href: '',
      active: 0,
      dialogFormVisible:false,
      formLabelWidth:'200px',
      btnState:false,
      companySelect:'',
      information:{
        associatedCompanyName:''
      },
      tabConfig: [
        {
          name: 'financialReportAnalysis',
          text: '财务分析'
        },
        {
          name: 'financialBalance',
          text: '资产负债表'
        },
        {
          name: 'financialProfit',
          text: '利润表'
        },
        {
          name: 'financialCashflow',
          text: '现金流量表'
        },
        {
          name: 'financialOther',
          text: '补充信息'
        }
      ],
      rules:{ 
        associatedCompanyName :[
            {required: true, message: '请输入公司名称', trigger: 'change'  }
        ],
      },
      companyArr:[]
    }
  },
  watch: {
    $route(route) {
      this.active = this.tabConfig.findIndex( i => i.name == route.name)
    }
  },
  created() {
    this.active = this.tabConfig.findIndex( i => i.name == this.$route.name)
    this.id = this.$route.query.id || ''
    let userId = this.$router.currentRoute.query.userId;
    this.companySelect = userId?JSON.parse(userId):0
    this.findCurrentCompany()
  },
  components: {
    "menu-top": () => import("../../common/Menu-Top"),
    "menu-left": () => import("../../common/Menu-Left"),
    "rotate-message": () => import("../../common/rotate-message")
  },
  methods: {
    handleClickSearch(){
      console.log(this.$router)
      let link = this.$router.history.current.path;
      this.$router.replace({path: link, query: {id: this.id,userId:this.companySelect,main_path: '/financialInfo_v2'}})
    },
    confrimBtn(formName){
        this.$refs[formName].validate((valid) => {
            if (valid) {
                this.btnState = true;
                let url = CONSTANT.URL.SYSTEM.SAVEASSOCIATION;
                let param = JSON.stringify(this.information);
                common.requestAjax(url, param, null, res => {
                    if(res.status == 200) {
                        this.$message({
                            type: 'success',
                            message: '保存成功!'
                        });
                        this.btnState = false;
                        this.dialogFormVisible = false;
                        this.information.associatedCompanyName = ''
                        this.companySelect = res.data.bussData.id;
                        this.handleClickSearch()
                        this.findCurrentCompany()
                    } else {
                      this.btnState = false;
                        this.$message({
                            type: 'error',
                            message: res.msg
                        });
                    }
                });
            } else {
                return false;
            }
            });
    },
    findCurrentCompany(){
        let  url = CONSTANT.URL.SYSTEM.FINDCURRENTCOMPANY,
            data = {},
            dataForm = {}
            common.requestAjax(url,data,dataForm,(res)=>{
            if(res.status == 200){
               this.companyArr = res.data.bussData;
            }else{
            
            }
        })
    },
    linkTo(link,id){
      this.$router.push({path: link, query: {id: id,main_path: '/financialInfo_v2'}})
    },
    handleAdd(active) {
      //根据显示不同的表的时候跳转到不同的新增页面
      const paths = ['', '/financialInfo_v2/financialBalanceEdit', '/financialInfo_v2/financialReportAnalysisEdit' , '/financialInfo_v2/financeOperatingEdit', '/financialInfo_v2/financeInfoEdit']
      paths[active] && this.$router.push({path:paths[active],query:{associationId:this.companySelect}})
    }
  }
}
</script>

<style scoped lang="scss">
a {
  color: inherit;
}

.main-content {
  background-color: #f5f5f5;
}

.breadcrumb-wrapper {
  margin-top: 29px;
}
.dialog-footer{
  .el-button--primary{
    background-color: #ED7018;
    display: inline-block;
    cursor: pointer;
    border: 1px solid  #ED7018;
    &:hover{
      background-color: #ED9000;
      transition:all .2s linear
    }
  }
}
.finance-filter{
  margin-bottom: 20px;
  .el-button{
    background-color: #ED7018;
    display: inline-block;
    cursor: pointer;
    border: 1px solid  #ED7018;
    &:hover{
      background-color: #ED9000;
      transition:all .2s linear
    }
  }
  .filter-item {
    // width: 20%;
    display: inline-block;
    /*margin-right: 2.56%;*/
    &:last-child {
        margin-right: 0;
    }
    .search-title {
        display: inline-block;
    }
    .el-input {
        display: inline-block;
    }
    .el-select {
        width: 80%;
    }
  }
}
.company-check{
  .el-input{
    width: 250px;
  }
}

main {
  position: relative;
  margin-top: 30px;
  background-color: #fff;
  padding-left: 37px;
  padding-top: 29px;
}

.tab {
  display: flex;
  height: 28px;
  padding-bottom: 18px;
}

.btn-group {
  position: absolute;
  right: 158px;
  top: 18px;
  display: flex;
  justify-content: flex-end;
  z-index: 999;
  cursor: pointer;
}

.btn-group>.btn {
  margin-left: 50px;
  height: 40px;
  width: 100px;
  color: #ffffff;
  border-radius: 6px;
  font-size: 18px;
  line-height: 42px;
  text-align: center;
  font-weight: 400;
}

.btn-group>.btn:first-child {
  background-color: rgb(225, 132, 73);
}

.btn-group>.btn:last-child {
  background-color: rgb(44, 53, 65);
}

.tab-item {
  position: relative;
  height: 17px;
  line-height: 17px;
  font-size: 17px;
  margin-right: 29px;
  font-weight: 500;
}

.tab-item.active {
  color: rgb(225, 132, 73);
}

.tab-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  bottom: -11px;
  background-color: rgb(225, 132, 73);
}

.view {
  background-color: #ffffff;
  padding-left: 35px;
  padding-bottom: 35px;
}
</style>
